<template>
  <div id="dialogGoods">
    <el-dialog
      :title="dialogData.title === 'add' ? '新增商品' : '编辑商品'"
      :visible.sync="dialogData.isShow"
      center
      width="650px"
    >
      <div>
        <el-form ref="ruleForm" :model="formData" :rules="rules">
          <el-form-item label="商品编号：" prop="goodsNo">
            <el-button type="success" @click="selectPromotion">
              选择商品
            </el-button>
            <span style="margin-left:20px">{{ formData.goodsNo }}</span>
          </el-form-item>
          <el-form-item
            label="商品主图："
            prop="goodsMainPictures[0].pictureUrl"
          >
            <uploadSingImg
              :imgUrl="formData.goodsMainPictures[0].pictureUrl"
              accept=".jpg,.jpeg,.png"
              :maxSize="10"
              @getImgUrl="getPictureUrl"
            >
              <template v-slot:imgInfo>建议尺寸200 * 200 大小10MB</template>
            </uploadSingImg>
          </el-form-item>
          <el-form-item label="课程标题：">
            <span>{{ formData.goodsDisplayName }}</span>
          </el-form-item>
          <div class="goodsPrice">
            <el-form-item class="priceItem" label="官网价格："
              >{{ formData.originalPrice / 100 || '' }}
            </el-form-item>
            <el-form-item class="priceItem" label="优惠金额："
              >{{ formData.activityDiscountPrice / 100 || '' }}
            </el-form-item>
            <el-form-item class="priceItem" label="销售价："
              >{{ formData.salePrice / 100 || '' }}
            </el-form-item>
            <el-form-item class="priceItem" label="首次收款金额："
              >{{ formData.initialPrice / 100 || '' }}
            </el-form-item>
            <el-form-item class="priceItem" label="尾款金额："
              >{{ formData.repaymentPrice / 100 || '' }}
            </el-form-item>
          </div>

          <el-form-item label="文字标签：">
            <ul class="nodot">
              <li v-for="(item, index) in tags" :key="index">
                <el-input
                  v-model="tags[index]"
                  size="mini"
                  maxlength="5"
                  style="width:100px;"
                ></el-input>
                <span
                  class="handleBtn"
                  @click="addTextTag"
                  v-if="tags.length - 1 === index && tags.length !== 10"
                  ><i class="el-icon-plus"></i
                ></span>
                <span
                  class="handleBtn"
                  @click="deleteTextTag(index)"
                  v-if="tags.length !== 1"
                  ><i class="el-icon-minus"></i
                ></span>
              </li>
            </ul>
          </el-form-item>
          <el-form-item label="商品链接：">
            <span>{{ formData.shortLink }}</span>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
        >
          生成商品展示
        </el-button>
        <el-button type="success" plain @click="cancelLabel">
          取 消
        </el-button>
      </div>
    </el-dialog>
    <dialogPromotionList
      v-if="dialogPromotionData.isShow"
      :dialog-promotion-data="dialogPromotionData"
      @promotionInfo="promotionInfo"
    ></dialogPromotionList>
  </div>
</template>
<script>
import {
  addCommodity,
  commodityDetail,
  editCommodity
} from '@/api/system/window'
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import dialogPromotionList from '@component/system/window/commodity/dialogPromotionList'
export default {
  props: ['dialogData'],
  components: { uploadSingImg, dialogPromotionList },
  data() {
    return {
      loading: false,
      formData: {
        goodsNo: '',
        goodsMainPictures: [{ pictureUrl: '' }]
      },
      tags: [''],
      dialogPromotionData: {
        isShow: false
      },
      rules: {
        goodsNo: [{ required: true, message: '请选择商品', trigger: 'change' }],
        'goodsMainPictures[0].pictureUrl': [
          { required: true, message: '请上传商品主图', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    const { id } = this.dialogData
    if (id) {
      commodityDetail({ id }, (res) => {
        if (res.imgInfo) {
          if (!res.goodsMainPictures.length) {
            res.goodsMainPictures.push({ pictureUrl: res.imgInfo })
          } else {
            res.goodsMainPictures[0].pictureUrl = res.imgInfo
          }
        }
        if (!res.tags.length) {
          res.tags.push('')
        }
        this.tags = res.tags
        this.formData = res
      })
    }
  },
  methods: {
    //选择商品
    selectPromotion() {
      this.dialogPromotionData.isShow = true
    },
    //外部商品信息
    promotionInfo(val) {
      let arr = [{ pictureUrl: '' }]
      if (!val.goodsMainPictures.length) {
        val.goodsMainPictures = arr
      }
      this.formData = val
      this.$refs.ruleForm.clearValidate([
        'goodsNo',
        'goodsMainPictures[0].pictureUrl'
      ])
    },
    //修改主图
    getPictureUrl(url) {
      this.formData.goodsMainPictures[0].pictureUrl = url
      this.$refs.ruleForm.clearValidate('goodsMainPictures[0].pictureUrl')
    },
    //添加文字标签
    addTextTag() {
      if (!this.tags.slice(-1)[0]) {
        this.$message.warning('请输入文字后，才能添加下一条标签')
        return
      }
      this.tags.push('')
    },
    //删除文字标签
    deleteTextTag(index) {
      this.tags.splice(index, 1)
    },
    //确定
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const tags = this.tags.filter((item) => {
            return item !== ''
          })
          let obj = {
            imgInfo: this.formData.goodsMainPictures[0].pictureUrl,
            number: this.formData.id,
            saleId: this.dialogData.saleId,
            tags,
            type: 'COURSE'
          }
          const { title, id } = this.dialogData
          if (title === 'add') {
            addCommodity(obj, () => {
              this.$emit('refresh')
              this.cancelLabel()
            })
          } else {
            editCommodity(id, obj, () => {
              this.$emit('refresh')
              this.cancelLabel()
            })
          }
        } else {
          return false
        }
      })
    },
    //清空
    cancelLabel() {
      this.loading = false
      this.dialogData.isShow = false
      this.dialogData.params = null
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.el-upload__tip) {
  margin-left: 60px !important;
}
:deep(.el-form-item__error) {
  margin-left: 100px !important;
}
.goodsPrice {
  display: flex;
  flex-wrap: wrap;
  .priceItem {
    width: 200px;
  }
}
.nodot {
  width: 280px;
  margin-left: 82px !important;
  .handleBtn {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #1dc8a4;
    color: #fff;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
